<template>
  <ul
    class="ipAdress"
    :style="{
      border: isIpAdressFocus ? '1px solid #409eff' : '',
    }"
  >
    <li v-for="(item, index) in ip" :key="index">
      <input
        @focus="isIpAdressFocus = true"
        type="text"
        @input="checkIpVal(item, index)"
        @keyup="turnIpPOS(item, index, $event)"
        v-model="item.value"
        ref="ipInput"
        @blur="setDefaultVal(item, index)"
      />
      <div></div>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    value: {},
  },
  watch: {
    value: {
      handler: function (newData, oldData) {
        console.info("监听传入的ip地址", newData);
        if (newData) {
          const val = newData.split(".");
          this.ip = val.map((item) => {
            return {
              value: item,
            };
          });
        } else {
          this.ip = [
            {
              value: "",
            },
            {
              value: "",
            },
            {
              value: "",
            },
            {
              value: "",
            },
          ];
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      ip: [
        {
          value: "",
        },
        {
          value: "",
        },
        {
          value: "",
        },
        {
          value: "",
        },
      ],
      isAdressFocus: false,
      isIpAdressFocus: false,
      isGatFocus: false,
    };
  },
  methods: {
    // ip输入
    checkIpVal(item, index) {
      //确保每个值都处于0-255
      let val = item.value;
      //当输入的是空格时，值赋为空
      val = val.trim();
      val = parseInt(val, 10);
      if (isNaN(val)) {
        val = "";
      } else {
        val = val < 0 ? 0 : val;
        val = val > 255 ? 255 : val;
      }
      item.value = val;
    },
    turnIpPOS(item, index, event) {
      let self = this;
      let e = event || window.event;
      //删除键把当前数据删除完毕后会跳转到前一个input，左一不做任何处理
      if (e.keyCode == 8) {
        let val = item.value;
        console.log(val);
        if (index == 0) {
        } else if (val == "") {
          self.$refs.ipInput[index - 1].focus();
        }
      }
      //右箭头、回车键、空格键、冒号均向右跳转，右一不做任何措施
      if (
        e.keyCode == 39 ||
        e.keyCode == 13 ||
        e.keyCode == 32 ||
        e.keyCode == 190 ||
        e.keyCode == 110
      ) {
        if (index == 3) {
        } else {
          self.$refs.ipInput[index + 1].focus();
        }
      }
    },
    setDefaultVal(item, index) {
      // ipRef
      this.isAdressFocus = false;
      this.isIpAdressFocus = false;
      this.isGatFocus = false;
      //当input失去焦点，而ip没有赋值时，会自动赋值为0
      let val = item.value;
      if (val == "") {
        item.value = "";
      }
      const isVal = this.ip.every((item) => item.value);
      if (isVal) {
        this.$emit("input", this.ip.map((item) => item.value).join("."));
      } else {
        this.$emit("input", "");
      }
      this.$emit("setDefaultVal", item, index, this.ip);
    },
  },
};
</script>
<style lang="scss" scoped>
.ipAdress {
  background-color: #fff;
  background-image: none;
  border-radius: 2px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  /* height: 27px; */
  /* padding: 0 0.90909rem; */
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
.isAdressFocus {
  border: 1px solid #409eff;
}
.ipAdress li {
  position: relative;
  height: 27px;
  margin: 0;
  list-style: none;
}

ul[class="ipAdress"] input[type="text"] {
  border: none;
  width: 100%;
  height: 26px;
  text-align: center;
  background: transparent;
  color: #606266;
  font-size: 12px;
}

.ipAdress li div {
  position: absolute;
  /* bottom: 2px; */
  right: 0;
  border-radius: 50%;
  background: #c0c4cc;
  width: 2px;
  height: 2px;
  top: 50%;
  margin-top: -1px;
}

/*只需要3个div*/
.ipAdress li:last-child div {
  display: none;
}

/*取消掉默认的input focus状态*/
.ipAdress input:focus {
  outline: none;
}
</style>